Center items vertically

I want to create a DB that contains 2 listViews and 2 buttons between them.  I'd like to have the 2 buttons vertically centered between the listViews (similar to a page that has 2 lists that you move items between them).  Is it possible to create a group consisting of the 2 buttons then center that group vertically?

Chris

Re: Center items vertically
PekkaMakinen - Mon Jan 08 01:42:46 EST 2018

Check the RXL reference example for "Constrained placement" 

Re: Center items vertically
chrscote - Mon Jan 08 10:47:45 EST 2018

I'm sorry if this seems stupid, but I read the example for "Constrained placement", and I'm still a bit confused as to how I'd place an element vertically centered within a window or frame.

Before trying the code in a full dialog box, I am trying to simply place a label centered within a frame:

string SCRIPT_NAME = "Center Elements";
Module currMod = current Module;

DB dbMain;
DBE dbeFrame;
DBE dbeLabelTest;

dbMain = create(currMod, SCRIPT_NAME, styleCentered);
dbeFrame = frame(dbMain, "Test", 250, 370);
dbeFrame->"top"->"flush"->"form";
dbeFrame->"left"->"form";
dbeFrame->"right"->"form";

dbeLabelTest = label(dbMain, "This label will be centered vertically in the frame");
dbeLabelTest->"top"->"flush"->dbeFrame;
dbeLabelTest->"left"->"inside"->dbeFrame;
dbeLabelTest->"right"->"unattached";
dbeLabelTest->"bottom"->"unattached";

show(dbMain);

I'm wondering, now, if it would be easier to use a hidden element to push the buttons down instead since the listViews will always stay the same size.  This time, I included a document drawing to show what I'd like to have for my end result.  If someone can tell me how to push the buttons down without the hidden object, please let me know.

Chris

Re: Center items vertically
PekkaMakinen - Tue Jan 09 02:07:12 EST 2018

string SCRIPT_NAME = "Center Elements";
Module currMod = current Module;

DB dbMain;
DBE dbeFrame;
DBE dbeLabelTest;

dbMain = create(currMod, SCRIPT_NAME, styleCentered);
dbeFrame = frame(dbMain, "Test", 250, 370);
dbeFrame->"top"->"flush"->"form";
dbeFrame->"left"->"form";
dbeFrame->"right"->"form";

dbeLabelTest = label(dbMain, "This label will be centered vertically in the frame");
dbeLabelTest->"top"->"flush"->dbeFrame;
dbeLabelTest->"left"->"inside"->dbeFrame;
dbeLabelTest->"right"->"unattached";
dbeLabelTest->"bottom"->"unattached";

show(dbMain);

Yes, sorry, I was wrong. I was thinking that if you bind the buttons to both of the top and bottom of the form, they would be centered, but no.

So, something like this is the best result what you can get (modified form treeView example)

// prevent dxl timeout dialog 
pragma runLim, 0 
// constants 
const int INITIAL_TREE_WIDTH  = 200 
const int INITIAL_TREE_HEIGHT = 20 
// dxl dialog 
DB dlg = null 
// dxl elements 
DBE dbeTree, dbeTree2, dbeLabel 
DBE AButton1 = null, AButton2 = null
// function 
void fnTreeSelect(DBE xx) 
{
    string sTemplate = getTemplateFileName(xx) 
    // only relevant if actual template was
    // selected 
    if (sTemplate != null)
    {
        // inform user
        infoBox(dlg, sTemplate)
    }
} 
void fnTreeSelect2(DBE xx) 
{
} 

void buttonCB(DBE xx) 
{
} 
dlg = create(dbExplorer, "Templates", styleCentered | styleFixed) 
// label 
dbeLabel = label(dlg, "Please select an item from
                         the tree...") 
dbeLabel->"top"->"form" 
dbeLabel->"left"->"form" 
dbeLabel->"right"->"unattached" 
dbeLabel->"bottom"->"unattached" 
// tree view 
dbeTree = treeView(dlg, 0, INITIAL_TREE_WIDTH, INITIAL_TREE_HEIGHT) 
dbeTree->"top"->"spaced"->dbeLabel 
dbeTree->"left"->"form" 
dbeTree->"right"->"unattached" 
dbeTree->"bottom"->"form" 

AButton1 = button(dlg, "A Button 1", buttonCB)
AButton1->"top"->"aligned"->dbeTree
AButton1->"left"->"spaced"->dbeTree
AButton1->"right"->"unattached"
AButton1->"bottom"->"form"

AButton2 = button(dlg, "A Button 2", buttonCB)
AButton2->"top"->"spaced"->AButton1
AButton2->"left"->"spaced"->dbeTree
AButton2->"right"->"unattached"
AButton2->"bottom"->"form"

dbeTree2 = treeView(dlg, 0, INITIAL_TREE_WIDTH, INITIAL_TREE_HEIGHT) 
dbeTree2->"top"->"aligned"->dbeTree 
dbeTree2->"left"->"spaced"->AButton1
dbeTree2->"right"->"form" 
dbeTree2->"bottom"->"form" 
realize dlg 
{
    // callbacks
    set(dbeTree, fnTreeSelect) 
    // callbacks
    set(dbeTree2, fnTreeSelect2)     
    // load templates into tree view 
    templates(dbeTree)    
    templates(dbeTree2)    
} 
block dlg 

Re: Center items vertically
chrscote - Thu Jan 11 09:18:41 EST 2018

I guess what you have there will work for what we need.  I see that the buttons appear aligned with the top of the tree views.  I had originally thought it might look better if the buttons were pushed down to the center of the window, but now that I see this version with the buttons aligned to the top, I think it looks better that way.

The only other question I have is what would be the best way to add a label above the right-hand tree view?

Chris

Re: Center items vertically
PekkaMakinen - Fri Jan 12 00:44:54 EST 2018

Same as in the example

dbeLabel = label(dlg, "Please select an item from the tree...")